<template>
  <div class="download-page">
    <div class="container">
      <div class="button-container">
        <div class="game-info">
          <img :src="game.icon" alt="Game Icon" class="game-icon">
          <p class="game-name">{{game.name}}</p>
        </div>

        <button v-for="item in downloadList" :key="item.id" class="nav-button" @click="redirectTo(item.link)">
          {{item.linkName}}
        </button>
      </div>

      <div class="footer">
        <div v-if="deviceType === 1">
          <p>123网盘免费小技巧：</p>
          <p>1，提示付费请点击弹窗右下角【去登陆】，登录后免费下载</p>
          <p>2，提示超出1G免费流量，请点击右上角App查看，保存到网盘后通过App免费下载</p>
        </div>

        <div v-if="deviceType === 2">
          <p>苹果手机下载允许描述文件之后</p>
          <p>需要打开：【设置】-【通用】-【VPN与设备管理】</p>
          <p>在已下载的描述文件内，点击安装</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DownloadPage'
}
</script>

<script setup>
import { ref, onMounted, computed, watch } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const deviceType = ref(0)
const gameId = ref(null)
const downloadUrls = ref([])
const game = ref({})
const defaultDownload = ref({
  linkName: '暂不支持'
})

// 解析设备类型
const parseDeviceType = () => {
  const userAgent = navigator.userAgent.toLowerCase()
  if (userAgent.indexOf('android') > -1) {
    deviceType.value = 1 // 安卓设备
    defaultDownload.value.linkName = "暂不支持安卓"
  } else if (userAgent.indexOf('iphone') > -1 || userAgent.indexOf('ipad') > -1) {
    deviceType.value = 2 // iOS 设备
    defaultDownload.value.linkName = "暂不支持苹果"
  } else {
    deviceType.value = 0 // 其他设备
  }
}

// 从 URL 中获取 gameId
const getGameIdFromUrl = () => {
  gameId.value = route.query.gameId
}

// 获取下载链接
const getDownloadUrls = async () => {
  try {
    const response = await fetch("/api/game/getDownloadUrls", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "accept": "application/json, text/plain, */*",
        "accept-language": "zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6"
      },
      body: JSON.stringify({ gameId: gameId.value })
    })
    const data = await response.json()
    downloadUrls.value = data
  } catch (error) {
    console.error('获取下载链接失败:', error)
  }
}

// 获取游戏信息
const getGame = async () => {
  try {
    const response = await fetch("/api/game/getGameById", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "accept": "application/json, text/plain, */*",
        "accept-language": "zh-CN,zh;q=0.9,en;q=0.8,en-GB;q=0.7,en-US;q=0.6"
      },
      body: JSON.stringify({ gameId: gameId.value })
    })
    const data = await response.json()
    game.value = data
  } catch (error) {
    console.error('获取游戏信息失败:', error)
  }
}

// 跳转到指定链接
const redirectTo = (link) => {
  if (link) {
    window.location.href = link
  }
}

// 计算下载列表
const downloadList = computed(() => {
  const filteredList = downloadUrls.value.filter(item => {
    // deviceType=4 表示所有设备都显示
      if (item.deviceType === 4) return true
    // deviceType=3 表示仅PC显示
    if (item.deviceType === 3 && deviceType.value === 0) return true
    // deviceType=1 表示安卓+PC显示
    if ((item.deviceType === 1 || item.deviceType === 11) && (deviceType.value === 1 || deviceType.value === 0)) return true
    // deviceType=2 表示苹果设备显示
    if (item.deviceType === 2 && deviceType.value === 2) return true
    return false
  })
  return filteredList.length === 0 ? [defaultDownload.value] : filteredList
})

// 监听路由参数变化
watch(() => route.query.gameId, (newGameId) => {
  if (newGameId && newGameId !== gameId.value) {
    gameId.value = newGameId
    getGame()
    getDownloadUrls()
  }
}, { immediate: true })

onMounted(() => {
  parseDeviceType()
  getGameIdFromUrl()
  getGame()
  if (gameId.value) {
    getDownloadUrls()
  }
})
</script>

<style scoped>
.download-page {
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f5f5;
}

.container {
  width: 600px;
  background-color: #fff;
  padding: 30px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 8px;
  min-height: 400px;
  justify-content: center;
}

.game-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 200px;
  margin: 0 auto 30px;
}

.game-icon {
  width: 120px;
  height: 120px;
  border-radius: 8%;
  object-fit: cover;
  margin-bottom: 15px;
}

.game-name {
  margin-top: 10px;
  font-size: 28px;
  font-weight: bold;
  color: #333;
}

.button-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 400px;
  margin: 0 auto;
}

.nav-button {
  padding: 15px 25px;
  font-size: 16px;
  color: white;
  background-color: #007BFF;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
  width: 100%;
  margin: 0 auto;
}

.nav-button:hover {
  background-color: #0056b3;
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.footer {
  font-size: 14px;
  color: #777;
  margin-top: 40px;
  line-height: 1.8;
  width: 100%;
  max-width: 500px;
}

@media (max-width: 600px) {
  .container {
    width: 90%;
    padding: 20px;
    min-height: auto;
  }

  .game-icon {
    width: 100px;
    height: 100px;
  }

  .game-name {
    font-size: 24px;
  }

  .nav-button {
    padding: 12px 20px;
  }
}
</style> 